<template>
  <div>
    <div class="list">
      <label>
        服务区域：
      </label>
      <user-address ref="address"  :isDistrict="isDistrict"/>
      <el-button @click="addAddress">添加</el-button>
      <el-checkbox class="pl" v-model="allCity">全国</el-checkbox>
    </div>
    <div class="list">
      <span v-for="(address, index) in addressName" v-bind:key="index" class="pl">{{address}}</span>
    </div>
  </div>
</template>

<script>
import UserAddress from "components/address";
export default {
  name: "serveAddress",
  props: {
    cityCodes: {
      type: String
    }
  },
  data() {
    return {
      addressList: [],
      isDistrict: false,
      addressName: [],
      allCity: '',
      arr: []
    };
  },
  components: {
      UserAddress,
  },
  methods: {
    addAddress(val) {
      this.allCity = false;
      this.arr.push(1)
      this.addressList = this.addressList.concat(this.$refs.address.getData().checkCity);
      if (!this.$refs.address.getData().checkProvince.length) {
        this.$message('请选择区域的省级')
        return
      }
       if (!this.$refs.address.getData().checkCity.length) {
         this.$message('请选择区域的市级')
        return
      }
      const areaName = this.$refs.address.getData().checkCity[0].areaName
      if (this.addressName.indexOf(areaName) > -1) {
        this.$message('您已添加，请勿重复')
        return
      }
      this.addressName.push(this.$refs.address.getData().checkCity[0].areaName)
      console.log(this.addressName);
    },
    getData() {
      let addressCode = ''
      // this.addressList.reduce((address) => {
      //   addressCode += address.areaCode + ','
      // })
      addressCode = this.addressName.join(',')
      return addressCode || '-1'
    }
  },
  watch: {
      allCity(val) {
          console.log(val)
          if(val) {
            this.addressName.length = 0
            this.addressList.length = 0
          }
      },
      cityCodes(val) {
        console.log(val)
        if (val == '-1') {
          this.allCity = true
        } else {
          this.addressName = this.addressName.concat(val.split(','))
        }
      }
  }
};
</script>

<style lang="less" scoped>
@import url('../assets/less/input.less');
.contianer {
  padding-left: 10px;
  text-align: left;
}
.title {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  padding-bottom: 5px;
}
.pl {
  padding-left: 36px;
}
.btn-submit{
  margin-top: 40px;
}
.width.el-input{
  width: 70px;
}
</style>
